<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="query">
      <!-- 科室：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select> -->
      <el-button
        plain
        size="mini"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList"
        >查询</el-button
      >
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="open_dialog('新增')"
        >新增</el-button
      > -->
      <el-button
        plain
        size="mini"
        icon="el-icon-edit"
        type="primary"
        @click="open_dialog('修改')"
        >查看</el-button
      >
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-delete"
        type="danger"
        @click="del_row"
        >删除</el-button
      > -->
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column prop="Name" label="患者姓名" align="center">
        </el-table-column>
        <el-table-column prop="Sex" label="性别" align="center">
        </el-table-column>
        <el-table-column
          prop="Phone"
          label="联系电话"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="IdCard"
          label="身份证号"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <!-- <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange_page"
        :current-page="query.CurrentPage"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      >
      </el-pagination>
    </div> -->
    <!-- 弹层 -->
    <el-dialog
      :title="dialog_title"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div class="myd">
        <p style="font-size: 24px; font-weight: 700">患者诊前信息录入表</p>
        <p style="font-size: 18px; margin-top: 20px; margin-bottom: 10px">
          一、基本信息
        </p>
        <div>
          <p style="margin-bottom: 5px">1.姓名：{{ row_info.Name }}</p>
          <p style="margin-bottom: 5px">2.身份证：{{ row_info.IdCard }}</p>
          <p style="margin-bottom: 5px">3.性别：{{ row_info.Sex }}</p>
          <p style="margin-bottom: 5px">4.年龄：{{ row_info.Age }}</p>
          <p style="margin-bottom: 5px">5.联系方式：{{ row_info.Phone }}</p>
          <p style="margin-bottom: 5px">6.常住地址：{{ row_info.Address }}</p>
        </div>
        <p style="font-size: 18px; margin-top: 20px; margin-bottom: 10px">
          二、现病史
        </p>
        <p style="margin-bottom: 5px">
          1.<span style="font-weight: 700">主要症状</span>：<br />{{
            row_info.Symptom
          }}
        </p>
        <p style="margin-bottom: 5px">
          2.<span style="font-weight: 700">症状出现时间</span>：<br />{{
            row_info.SymptomTime
          }}
        </p>
        <p style="margin-bottom: 5px">
          3.<span style="font-weight: 700">症状变化</span>：<br />{{
            row_info.SymptomChange
          }}
        </p>
        <p style="margin-bottom: 5px">
          4.<span style="font-weight: 700">诱发与缓解因素</span>：<br />{{
            row_info.Trigger
          }}
        </p>
        <p style="margin-bottom: 5px">
          5.<span style="font-weight: 700">曾接受的治疗</span>：{{
            row_info.Treatment
          }}
        </p>
        <p style="font-size: 18px; margin-top: 20px; margin-bottom: 10px">
          三、既往病史
        </p>
        <div>
          <p style="font-weight: 700">1.是否患过重大疾病：</p>
          <p>{{ row_info.HasMajorIllness }}</p>
          <p style="margin-bottom: 5px">
            若选 “是”，请列举疾病名称、患病时间及治疗情况：
          </p>
          <p>{{ row_info.MajorIllness }}</p>
        </div>
        <div>
          <p style="font-weight: 700">2.是否有过敏史：</p>
          <p>{{ row_info.HasAllergy }}</p>
          <p style="margin-bottom: 5px">
            若选 “是”，请列出过敏物质及过敏反应表现：
          </p>
          <p>{{ row_info.Allergy }}</p>
        </div>
        <div>
          <p style="font-weight: 700">3.是否长期服用药物：</p>
          <p>{{ row_info.HasMedicine }}</p>
          <p style="margin-bottom: 5px">
            若选 “是”，请列出药物名称、服用原因及服用时长：
          </p>
          <p>{{ row_info.Medicine }}</p>
        </div>
        <p style="font-size: 18px; margin-top: 20px; margin-bottom: 10px">
          四、家族病史
        </p>
        <div>
          <p style="font-weight: 700">
            1.直系亲属（父母、子女、兄弟姐妹）是否有以下疾病：
          </p>
          高血压：{{ row_info.HasFamilyHypertension }} 糖尿病：{{
            row_info.HasFamilyDiabetes
          }}
          心脏病：{{ row_info.HasFamilyCardiac }} 肿瘤：{{
            row_info.HasFamilyTumor
          }}
          <p style="margin-bottom: 5px">
            若以上有 “是” 的选项，请简述相关亲属与您的关系、患病类型及大致情况：
          </p>
          <p>{{ row_info.FamilyHistory }}</p>
          <p style="font-weight: 700">2.其他家族遗传病史：</p>
          <p style="margin-bottom: 5px">
            {{ row_info.FamilyHistoryOther }}
          </p>
        </div>
        <p style="font-size: 18px; margin-top: 20px; margin-bottom: 10px">
          五、生活习惯
        </p>
        <div>
          <p style="font-weight: 700">1.吸烟情况：</p>
          <p>{{ row_info.SmokeInfo }}</p>
        </div>
        <div>
          <p style="font-weight: 700">2.饮酒情况：</p>
          <p>{{ row_info.DrinkInfo }}</p>
        </div>
        <div>
          <p style="font-weight: 700">3.运动情况：</p>
          <p>{{ row_info.ExerciseInfo }}</p>
        </div>
        <div style="margin-bottom: 20px">
          <p style="font-weight: 700">4.饮食偏好：</p>
          <p>{{ row_info.DietaryPreference }}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini">关 闭</el-button>
        <!-- <el-button type="primary" @click="btn_ok" size="mini">保 存</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {
        CurrentPage: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      dialogVisible: false,
      dialog_title: "",
      row_info: {},
      form: {
        Type: "",
        Title: "",
        Content: "",
        Image: "",
      },
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    this.getList();
  },
  methods: {
    getList() {
      this.$post(
        "https://mini.mdxrmyy.top:8881/api/FrontInfo/GetAll",
        this.query
      ).then((res) => {
        this.tableData = res.Data;
      });
    },
    open_windo(url) {
      window.open(url);
    },
    row_click(row) {
      if (!row) {
        this.row_info = {};
        return;
      }
      this.row_info = row;
    },
    del_row() {
      this.$get("/Option/SoftDelete/" + this.row_info.Id).then((res) => {
        this.getList();
      });
    },
    handleClose() {
      this.row_info = {};
      this.dialogVisible = false;
    },
    btn_ok() {
      // this.form
      var url = this.form.Id
        ? "https://mini.mdxrmyy.top:8881/api/Article/Update"
        : "https://mini.mdxrmyy.top:8881/api/Article/Create";
      if (this.form.Id) {
        this.$put(url, this.form).then((res) => {
          this.getList();
          this.handleClose();
        });
      } else {
        this.$post(url, this.form).then((res) => {
          this.getList();
          this.handleClose();
        });
      }
    },
    open_dialog(val) {
      //   this.dialog_title = val + "质控人员";
      //   if (val == "新增") {
      //     this.dialogVisible = true;
      //     return;
      //   }
      if (val == "修改" && this.row_info) {
        this.form = this.row_info;
        this.dialogVisible = true;
        return;
        // this.$get("/Option/GetOneNew/" + this.row_info.Id).then((res) => {
        //   this.form = res.Data;
        //   this.dialogVisible = true;
        //   return;
        // });
      } else {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据后操作！",
        });
        return;
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
</style>